<template>
	<w-container id="container" :loading="isLoading">
		<w-navbar id="my-nav" bgColor="#F5F5F5" :title="tabIndex == 0?'最新上市':'神秘盲盒'"></w-navbar>
		<view class="flex flex-ai-center flex-js-center mt-10" v-if="goodsList.length">
			<w-image src="/static/bg/inde-top-logo1.png" width="144" height="40"></w-image>
		</view>
		<!-- <w-navbar navType="default" id="my-nav" bgColor="#fff">
			<template #center>
				<u-sticky :offset-top="0" style='top:0' id='tab'>
					<view class="tabs flex flex-js-center bg-color-white" :class="{show:tabTop<=10}"
						:style="{paddingTop:padding+'px'}">
						<w-tabs :tabList="tabList" scrollable @change="changeTab"
							:itemStyle="{width:'200rpx'}"></w-tabs>
					</view>
				</u-sticky>
			</template>
		</w-navbar> -->
		<view class="mt-12 plr-16 pb-12">
			<w-index-collection class="mb-12" v-for="item in goodsList" :key="item.id+String(item.batch_id)"
				:product="item"></w-index-collection>
		</view>
		<w-loading :type="!tabIndex?collectionLoadingType:boxLoadingType" emptyType="search" empty-top="50"></w-loading>
	</w-container>
</template>

<script>
	import {
		getCalenderList
	} from '@/api/collection/index.js'
	export default {
		data() {
			return {
				isLoading: false,
				tabTop: 123,
				padding: 5,
				tabList: [{
						name: '新款藏品',
					},
					{
						name: '神秘盲盒',
					},
				],
				tabIndex: 0,
				collectionList: [],
				loadingType: 'none',
				boxList: [],
				collectionPageInfo: {
					goods_type: 2,
					list_rows: 10,
					page: 0
				},
				collectionLoadingType: 'none',
				boxPageInfo: {
					goods_type: 1,
					list_rows: 10,
					page: 0
				},
				boxLoadingType: 'none',
			}
		},
		computed: {
			goodsList() {
				if (this.tabIndex == 0) return this.collectionList;
				if (this.tabIndex == 1) return this.boxList
			}
		},
		methods: {
			scroll(e) {
				let _this = this;
				uni.createSelectorQuery().in(this).select("#tab").boundingClientRect(({
					top
				}) => {
					_this.tabTop = top
					let statusHeight = uni.getSystemInfoSync().statusBarHeight
					if (top <= statusHeight) {
						_this.padding = statusHeight + 5;
					} else {
						_this.padding = 5
					}

				}).exec()
			},
			changeTab({
				index,
				refresh = false
			}) {
				console.log(index);
				this.tabIndex = index;
				this.onRefresh(index)
			},
			getList(index) {
				if (index == 1) {
					this.getBoxList() //获取盲盒列表
				} else {
					this.getCollectionList() //获取藏品列表
				}
			},
			onRefresh(index = 0) {
				this.collectionPageInfo.page = 0
				this.boxPageInfo.page = 0
				this.collectionList = []
				this.boxList = []
				this.collectionLoadingType = 'none'
				this.boxLoadingType = 'none'
				this.getList(index)
			},
			//获取藏品列表
			getCollectionList() {
				if (this.collectionLoadingType !== 'none') return;
				this.collectionLoadingType = 'loading'
				this.collectionPageInfo.page++
				getCalenderList(this.collectionPageInfo).then(res => {
					uni.stopPullDownRefresh()
					this.collectionList = this.collectionList.concat(res.data)
					this.collectionLoadingType = 'none'
					if (res.data.length == 0) this.collectionLoadingType = 'empty'
				}).catch(err => {})
			},
			getBoxList() {
				if (this.boxLoadingType !== 'none') return;
				this.boxLoadingType = 'loading'
				this.boxPageInfo.page++
				getCalenderList(this.boxPageInfo).then(res => {
					uni.stopPullDownRefresh()
					this.boxList = this.boxList.concat(res.data)
					this.boxLoadingType = 'none'
					if (res.data.length == 0) this.boxLoadingType = 'empty'
				}).catch(err => {})
			},
			//加载更多
			loadMore() {
				if (this.tabIndex == 0) {
					let search = JSON.parse(JSON.stringify(this.tabIndex ? this.boxPageInfo : this.collectionPageInfo))
					search.page++
					this.getGoodsList(search);
				} else {
					let search = JSON.parse(JSON.stringify(this.activityPage))
					search.page++
					this.getActivityList(search);
				}
			},
			//切换到商品列列表（藏品|盲盒）
			switchGoodsList(goodsType, refresh) {
				let list = goodsType == 1 ? this.boxList : this.collectionList
				if (!list.length || refresh) {
					let search = goodsType == 1 ? this.boxPageInfo : this.collectionPageInfo;
					search.page = 1;
					this.getGoodsList(search)
				}
			},
			//获取商品列表
			getGoodsList(search) {
				if (this.loadingType == 'loading') return;
				this.loadingType = 'loading'
				getCalenderList(search).then(res => {
					this.loadingType = 'none'
					if (search.page == 1 && res.data.length == 0) {
						this.loadingType = 'empty'
					}
					uni.stopPullDownRefresh()
					this.insertGoodsData(search, res.data);
				})
			},
		},
		onReachBottom() {
			this.loadMore();
		},
		onPullDownRefresh() {
			this.onRefresh()
		},
		onLoad(options) {
			this.tabIndex = Number(options.type) || 0
			this.onRefresh(Number(options.type))
		},
	}
</script>

<style lang="scss" scoped>
	#container {
		padding-bottom: calc(var(--window-bottom) + 20rpx);
		
		.header {
			padding-top: calc(var(--status-bar-height) + 24rpx);
		}
	
		.tabs.show {
			@extend .bg-color-page_mian;
		}
	
		.btn_card {
			width: 100%;
			height: auto;
	
			>image {
				width: 328rpx;
				height: 84rpx;
				display: block;
			}
		}
	}
</style>